import React, { useState } from 'react';
import { Button, Form } from 'antd';
import { AxDatePicker, AxInput, AxSelectSearch, AxTextArea } from '@/components/AxForm/AxFormItem';
import { AxButtonCancel, AxButtonOk, AxCard, AxGridLayout, AxLayout } from '@/components/AxBase';
import Material from './components/material';
import Import from './components/import';
import { AxDivider } from '@/components/AxBase/AxDivider';

const Index: React.FC<any> = (props) => {
    const { form } = props;
    const [importVisible, setImportVisible] = useState(false);

    const oursideHeight = 88 + 90 + 24 + 55;

    const importProps = {
        visible: importVisible,
        handleVisible: setImportVisible,
    };
    return (
        <>
            <AxCard
                // flex={24}
                // title="学费收费"
                // bordered
                bodyStyle={{ paddingBottom: 6 }}
            // extra={<Button type="link" icon="close" onClick={handleVisible} />}
            >
                <AxLayout
                    center={{
                        span: 18,
                        children: (
                            <AxCard
                                flex={24}
                                height={document.body.clientHeight - oursideHeight}
                                bordered
                                bodyStyle={{ padding: 6 }}
                            >
                                <div
                                    style={{
                                        height: document.body.clientHeight - oursideHeight,
                                        overflow: 'auto',
                                    }}
                                >
                                    <AxGridLayout
                                        items={[
                                            <AxDivider type='horizontal' wholerow="two" >添加入库物资</AxDivider>,
                                            <AxInput form={form} label="物资名称" field="remark" required />,
                                            <AxInput form={form} label="CAS编码" field="remark" required />,
                                            <AxInput form={form} label="CAS名称" field="remark" required />,
                                            <AxSelectSearch form={form} label="性状" field="remark" required />,
                                            <AxSelectSearch form={form} label="计量单位" field="remark" required />,
                                            <AxInput form={form} label="额定容量" field="remark" required />,
                                            <AxInput form={form} label="当前量" field="remark" required />,
                                            <AxDatePicker form={form} label="保质期" field="remark" required />,
                                            <AxCard
                                                flex={24}
                                                height={55}
                                                bodyStyle={{ padding: 10, marginTop: 3, float: 'right' }}
                                                wholerow="two"
                                            >
                                                <AxButtonOk
                                                    form={form}
                                                    style={{ marginLeft: 8 }}
                                                // confirmLoading={confirmLoadingOK}
                                                // handleClick={handleCreate}
                                                >
                                                    添加
                                            </AxButtonOk>
                                            </AxCard>,
                                            <AxDivider type='horizontal' wholerow="two" >物资列表</AxDivider>,
                                            <Button
                                                type="primary"
                                                size="small"
                                                className='ax-btn-color1'
                                                style={{ marginLeft: 4 }}
                                                icon='import'
                                                onClick={() => setImportVisible(true)}
                                            // disabled={feeOptionData.list.length === 0}
                                            >
                                                导入物资
                                        </Button>,
                                            <Material
                                                wholerow="two"
                                                oursideHeight={oursideHeight}
                                            />,
                                        ]}
                                    />
                                </div>
                            </AxCard>
                        ),
                    }}
                    east={{
                        span: 6,
                        children: (
                            <AxCard
                                flex={24}
                                height={document.body.clientHeight - oursideHeight}
                                bordered
                                bodyStyle={{ padding: 6 }}
                            >
                                <div
                                    style={{
                                        height: document.body.clientHeight - oursideHeight,
                                        overflow: 'auto',
                                    }}
                                >
                                    <AxDivider type='horizontal' wholerow="two" >申请单</AxDivider>,
                                <AxInput
                                        form={form}
                                        label="申请标题"
                                        field="explain"
                                        required
                                    />
                                    <AxInput form={form} label="申请人" field="remark" required />
                                    <AxInput form={form} label="申请人电话" field="remark" required />
                                    <AxSelectSearch form={form} label="非采购类型" field="remark" required />
                                    <AxSelectSearch form={form} label="审核接收人" field="remark" required />
                                    <AxTextArea form={form} label="申请备注" field="remark" required />
                                </div>
                            </AxCard>
                        ),
                    }}
                    south={{
                        span: 24,
                        children: (
                            <AxCard
                                flex={24}
                                height={55}
                                bodyStyle={{ padding: 10, marginTop: 3, float: 'right' }}
                            >
                                <AxButtonCancel
                                // handleClick={handleVisible}
                                >取消</AxButtonCancel>
                                <AxButtonOk
                                    form={form}
                                    style={{ marginLeft: 8 }}
                                // confirmLoading={confirmLoadingOK}
                                // handleClick={handleCreate}
                                >
                                    保存
                  </AxButtonOk>
                            </AxCard>
                        ),
                    }}
                />
            </AxCard>
            {importVisible && <Import {...importProps} />}
        </>
    );
};

export default Form.create<any>()(Index);
